<template>
  <div class="add-article-container">
    <h3>新增文章</h3>
    <el-header>文章管理</el-header>
    <el-form ref="form" :model="articleData" label-width="100px">

      <el-form-item label="文章标题">
        <el-input v-model="articleData.articleTitle"></el-input>
      </el-form-item>
      <el-form-item label="列表图">
        <el-upload
            class="avatar-uploader"
            name="file"
            action="http://localhost:8230/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :accept="'.jpeg,.jpg,.png,.gif'"
        >
          <template v-if="imageUrl">
            <img :src="imageUrl" class="avatar" alt="Uploaded Image" />
          </template>
          <template v-else>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select v-model="articleData.articleCategory" placeholder="请选择" clearable>
          <el-option label="分类 1" :value="'分类 1'"></el-option>
          <el-option label="分类 2" :value="'分类 2'"></el-option>
          <!-- 根据实际情况添加更多分类选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="文章内容">
        <el-input v-model="articleData.articleContent"></el-input>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="articleData.publishTime" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="articleData.sortNumber"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button type="primary" @click="addArticle()">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleData: {
        articleName: '',
        articleMessage: '',
        articleTitle: '',
        articleCategory: '',
        articleContent: '',
        publishTime: null,
        sortNumber: '',
      },
      imageUrl: '',
    };
  },
  methods: {
    addArticle() {
      this.axios.post(`http://localhost:8230/settings-information/change`, this.articleData)
          .then(res => {
            if (res.data) {
              this.$message.success('文章添加成功');
              this.$router.push({ path: '/' }); // 返回到列表页面
            }
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
    },
    handleAvatarSuccess(res, file) {
      this.articleData.chart = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<style>
.add-article-container {
  padding: 20px;
}
.avatar-uploader.el-upload.hover {
  border-color: #409EFF;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>